<template>
	<view class="page">
		<!-- 个人信息 -->
		<view class="mine-top" @click="getlogin">
			<view class="" style="display: flex; ">
				<u-avatar src="https://img.xieling.top/test.png" size="54"></u-avatar>
				<view class="mine-info">
					<view class="mine-name">
						{{info.name}}
					</view>
					<view class="mine-phone">
						{{info.phone | formatNum}}
					</view>

				</view>
			</view>
			<u-icon size="20" color="#ffffff" name="arrow-right"></u-icon>

		</view>
		<u-sticky>
			<!-- 操作菜单 -->
			<view style="display: flex;
			justify-content: flex-start;
			width: 90%;
			 padding: 40rpx ;
			background-color: #252928;
			 ">
				<view class="handlemenu" v-for="(item,index) in menu" @click="menclick(index)">
					<!-- <u-icon :label="item.tips" labelPos="bootem" size="30" space="20px" :name="item.img"></u-icon> -->
					<view style="display: flex;flex-direction: column;">
						<view style="margin: auto;margin-bottom: 5rpx;">
							<image :src="item.img" mode="widthFix" style="width: 50rpx;"></image>
						</view>
						<view style="opacity: 0.5;">{{item.tips}}</view>
					</view>
				</view>
			</view>
		</u-sticky>





		<view class="contents" v-if="data_show">
			<view>
				<view style="padding-top: 20rpx;padding-left: 35rpx;">
					<text style="padding-right: 20rpx;opacity: 0.5;">我的数字藏品</text><text>3</text>
				</view>
				<view style="width: 96%;margin: auto;">
					<view style="display: flex;justify-content: space-between;flex-wrap: wrap;">
						<view v-for="int in 3" @click="sub_nav"
							style="background-color: #2e2e2e;width: 46%;margin-top: 20rpx;border-radius: 50rpx;padding-bottom: 10rpx;">
							<image src="https://img.xieling.top/14.jpg" mode="widthFix"
								style="width: 100%;border-radius: 50rpx;"></image>
							<view style="margin-top: 20rpx;font-size: 28rpx;padding-left: 5rpx;">唐·十二辰·鼠首俑</view>
							<view class="tip-overall">
								Ac9952555#dsgf32525
							</view>
							<view
								style="display: flex;width: 90%;margin: auto;margin-top: 20rpx;justify-content: space-between;align-items: center;">
								<view style="font-size: 24rpx;opacity: 0.5;"> 西安博物馆</view>
								<view>
									<u-icon size="24"
										name="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-698da70f-3b06-4c55-8457-df4a00210163/e7c3db64-056f-47c2-a995-e552dbe386fc.png">
									</u-icon>
								</view>
							</view>
						</view>
					</view>
				</view>

			</view>

			<u-loadmore :status="status" height="100rpx" loadmoreText="-更多内容敬请期待-" />
		</view>



		<view class="content" v-if="!data_show">
			<view style="position: absolute;left: 0;bottom: 0;top: 0;right: 0;margin: auto;width: 100%;height: 300rpx;">
				<u-empty :width="100" textColor="#7e807f" mode="data" icon="https://img.xieling.top/mini4.png"
					text="暂无数字藏品" iconColor="#ffffff"
					style="position: absolute;left: 0;bottom: 0;top: 0;right: 0;margin: auto">
				</u-empty>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userinfoResult: {},
				data_show: true,
				menucurrent: 0,
				info: {
					"name": "藏家_10086",
					"phone": "12345678910",

				},
				menu: [{
						tips: "我的订单",
						img: "https://img.xieling.top/mini1.png"
					},
					{
						tips: "藏品记录",
						img: "https://img.xieling.top/mini3.png",
					},
					{
						tips: "设置",
						img: "https://img.xieling.top/mini2.png"
					},
				],
			}
		},
		filters: {
			formatNum(num) {
				// 手机
				return num.replace(/^(\d{3})\d{6}(\d+)/, "$1******$2")
			}
		},

		methods: {
			sub_nav() {
				uni.navigateTo({
					url: '../../mall/order-details/order-details'
				})
			},
			menclick(e) {
				this.menucurrent = e
				if (e == 0) {
					console.log(e)
					uni.navigateTo({
						url: '../../mall/order/order'
					})
				} else if (e == 1) {
					uni.navigateTo({
						url: '../../mall/collection/collection'
					})
				} else {
					uni.navigateTo({
						url: '../../mall/set/set'
					})
				}
			},
			Goinfo() {

				// uni.navigateTo({

				// 	url: '../../mall/info/info?name=' + this.info.name + '&phone=' + this.info.phone,

				// })
				
				console.log('454545')
			},
			getlogin() {
				let that = this
				uni.getUserProfile({
					desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
					success: (res) => {
						that.userinfoResult = res;
						that.getsession();
					}
				})
			},
			getsession() {
				let that = this
				uni.login({
					success: function(info) {
						let code = info.code;
						console.log(that.userinfoResult)
						uni.setStorageSync('code', code)
						that.$base.request(that.serverPath.wx_auth, 'POST', {
							code: code,
							nickname: that.userinfoResult.userInfo.nickName
						}).then(function(data) {
							console.log(data)
							if(data.code == 200){
								console.log(data)
								uni.setStorageSync('token',data.data.token)
								uni.setStorageSync('openid',data.data.openid)
								that.login_show = true
								uni.setStorageSync('userinfo',that.userinfoResult)
							}else{
								console.log('登录接口出错')
							}
						});
					}
				});
			},
			godetalis() {
				uni.navigateTo({
					url: '../../mall/order-details/order-details'
				})
			}
		}
	}
</script>

<style lang="scss">
	.tip-overall {
		height: 40rpx;
		background-color: #f3e0bc;
		color: #2B2C2E;
		font-size: 22rpx;
		font-weight: 600;
		line-height: 40rpx;
		border-radius: 5rpx;
		width: 88%;
		margin: auto;
		margin-top: 20rpx;
	}

	.mine-top {
		color: #b8bcbf;
		display: flex;
		justify-content: space-between;
		padding: 20rpx 40rpx;
		margin: 0px auto;


	}

	.tip-overall {
		height: 40rpx;
		position: relative;
		color: #2B2C2E;
		font-size: 22rpx;
		font-weight: 600;
		line-height: 40rpx;
		padding: 0rpx 10rpx;
		border-radius: 5rpx;
		margin-right: 10rpx;
	}

	.tip-overall image {
		width: 90%;
		// height: 60rpx;
	}

	.handlemenu {
		display: flex;
		justify-content: space-around;
		width: 100%;
		text-align: center;
	}

	.mine-info {
		height: 110rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-left: 30rpx;
	}

	.mine-name {
		font-size: 36rpx;
		font-weight: 500;
		color: #FFFFFF;
	}

	.mini-menu {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		justify-content: center;
		font-size: 26rpx;
	}

	.content {
		background-color: #1d1d1d;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		height: 69%;
		position: relative;
	}

	.contents {
		background-color: #1d1d1d;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		height: auto;
		position: relative;
	}
</style>
